<!-- 今日小结 -->
<template>
  <div class="summary_page" v-if="isEdit||info.content">
    <div class="main_label">
      <span>今日小结</span>
      <div>
        <span v-show="isEdit&&info.content" @click="editSummary" class="delete_btn">编辑</span>
        <span v-show="isEdit&&info.content" @click="deleteSummary" class="delete_btn">删除</span>
      </div>
    </div>
    <Row class="label_warp" v-show="isEdit&&!info.content">
      <Col span="24" class="tips">
      <Icon type="md-alert" class="tips_icon" />
      <div>您可点击右侧“添加小结”按钮，向日报中进行添加当日案场小结内容</div>
      </Col>
    </Row>
    <div v-show="info.content" class="summary_content clearfix">
      <div :class="[showMoreFlag?'line_clamp':'','summary_writing']">
        {{info.content}}
      </div>
      <div class="show_more" v-if="info.content.length>135" @click="showMore">
        {{showMoreFlag?'收起全部':'展开全部'}}
      </div>
      <div class="image-style">
        <div v-for="(item,index) in info.imageUrls" :key="index"
          class="small-img hand position-relative" :style="{}">
          <img :src="item.url" class="img-show" :style="{'width':'100%','height':'100%'}">
          <div class="list-cover flex flex-vertical-center">
            <Icon type="ios-eye-outline" :size="22" @click.native="onPreviewImg(index)">
            </Icon>
          </div>
        </div>
      </div>
    </div>
    <preview-image :images="previewImg" :showIndex="previewIndex" ref="preViewImage">
    </preview-image>
    <summary-modal ref="summaryModal" @success='onSuccess' />
  </div>
</template>

<script>
  import dailyApi from '@/biz/buildingHome/daily'
  import summaryModal from '../modal/summary.vue'
  export default {
    props: ['isEdit'],
    components: { summaryModal },
    data() {
      return {
        info: {
          content: '',
          imageUrls: []
        },
        previewImg: [],
        previewIndex: 0,
        canDownLoad: false,
        showMoreFlag: false,
        infoData: {},
        currentDate: ''
      }
    },
    methods: {
      show(data) {
        this.infoData = data
        this.currentDate = this.$parent.currentDate
        this.getData()
      },
      onPreviewImg(index) {
        this.previewImg = this.info.imageUrls.map(item => {
          return item.url
        })
        this.previewIndex = index
        this.$refs.preViewImage.show()
      },
      showMore(flag = true) {
        this.showMoreFlag = flag ? !this.showMoreFlag : flag
      },
      //编辑小结
      editSummary() {
        let data = { ...this.info, title: '编辑今日小结' }
        this.$refs.summaryModal.show(data)
      },
      //删除小结
      deleteSummary() {
        this.$Modal.confirm({
          title: '“今日小结”删除确认',
          content: `请确认，是否将“今日小结”从案场日报中删除？<span style='color:red'>删除后将无法恢复</span>`,
          okText: '确认删除',
          closable: true,
          onOk: () => {
            dailyApi.deleteDailySection({ id: this.info.id }).then(res => {
              this.$Message.success('删除成功')
              this.getData()
            })
          }
        })
      },
      onSuccess() {
        this.getData()
      },
      getData() {
        this.info.currentDate = this.$parent.currentDate

        let params = {
          date: this.$parent.currentDate,
          buildingId: this.$dt.buildInfo().housesId
        }
        dailyApi.findDailySection(params).then(res => {
          console.log(res, '获取小结数据')
          this.info = res
          this.info.content = res.content ? res.content : ''
          let imageUrls = []
          res.imageUrls && res.imageUrls.split(',').forEach(item => {
            imageUrls.push({ url: item })
          });
          this.info.imageUrls = imageUrls
          this.$emit('callBack', this.info.content)
        })
      }
    }
  }
</script>
<style lang='scss' scoped>
  .summary_page {
    width: 100%;
    margin-bottom: 15px;

    .main_label {
      display: flex;
      justify-content: space-between;
      line-height: 20px;
      border-left: 5px solid #2b85e4;
      padding-left: 8px;
      font-size: 15px;
      margin-bottom: 15px;

      .delete_btn {
        color: #2d8cf0;
        cursor: pointer;
        margin-right: 10px;
        font-size: 13px;
      }
    }

    .label_warp {
      margin-bottom: 15px;
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      line-height: 32px;
      padding: 10px;
      border-radius: 5px;

      .tips {
        line-height: 20px;
        font-size: 14px;
        display: flex;

        .tips_icon {
          font-size: 20px;
          color: #0f42a7;
          vertical-align: sub;
        }
      }
    }

    .summary_content {
      border: 1px solid #ccc;
      background-color: rgba(254, 252, 236, 1);
      padding: 15px;
      border-radius: 5px;

      .summary_writing {
        word-break: break-all; //在恰当的断字点进行换行 
        overflow: hidden; //文字超出的进行隐藏
        text-overflow: ellipsis; //超出的文字用省略号表示
        display: -webkit-box; //将元素设为盒子伸缩模型显示
        text-overflow: ellipsis; //利用盒子模型 
        -webkit-box-orient: vertical; //伸缩方向设为垂直方向
        -webkit-line-clamp: 5; //设定一共5行，超出的部分隐藏，并用省略号来表示
      }

      .line_clamp {
        -webkit-line-clamp: 999; //设定一共5行，超出的部分隐藏，并用省略号来表示
      }

      .show_more {
        text-align: center;
        color: #0f42a7;
        line-height: 20px;
        cursor: pointer;
        margin-top: 10px;
      }

      .image-style {
        // margin-top: 10px;
      }

      .list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
        justify-content: space-around;
      }

      .small-img {
        margin: 10px 1.6% 0 1.6%;
        margin-top: 10px;
        float: left;
        width: 30%;
        height: 110px;
        border: 1px solid #ccc;
      }

      .small-img:hover .list-cover {
        display: flex;
      }

      .list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
      }
    }
  }
</style>